<template>
<div class="ruleConfigDetails">
  <el-button type="primary" size="mini" @click="addDetail">添加</el-button>
  <rule-config-details-item
    v-for="(item, index) in value" :key="index" :model="item" :sem-options="semOptions"></rule-config-details-item>
</div>
</template>

<script>
import RuleConfigDetailsItem from "./ruleConfigDetailsItem";
export default {
  name: "ruleConfigDetails",
  components: {RuleConfigDetailsItem},
  props:{
    value:{
      required: true,
      type: Array
    }
  },
  data(){
    return{
      semOptions: []
    }
  },
  created(){
    this.$yAxios({
      url: this.$api.sem.semRuleTypeList,
      data: {}
    }, info => {
      this.semOptions = info;
    })
  },
  provide(){
    return {
      delDetail: this.delDetail,
      filterSemOptions: (function(value, options){
        let selected = this.value.map(item => item.ruleCode).toString();
        return options.map(item => ({
          ...item,
          disabled: !(item.code === value || selected.indexOf(item.code) === -1)
        }));
      }).bind(this)
    }
  },
  methods:{
    addDetail(){
      this.value.push({
        ruleCode: '',
        num: 1,
        selfNum: 1
      });
    },
    delDetail(item){
      let index = this.value.indexOf(item);
      index >= 0 && this.$delete(this.value, index);
    }
  }
}
</script>

<style scoped lang="less">
.ruleConfigDetails{

}
</style>